<template>
    <div class="echarts">
        <a-button type="primary" @click="backMap()">返回概览</a-button>
        <div :style="{height:'500px',width:'100%'}" ref="myEchart"></div>
    </div>
</template>
<script>
    import {getAction} from "@/http/index"
    import echarts from "echarts";
    import 'echarts/lib/chart/map';// 引入地图数据
    import 'echarts/map/js/china';
    import {provinces,cityMap} from "@/utils/design" //区域数据

    export default {
        name: "echarts",
        props: ["userJson"],
        data() {
            return {
                myChart: null
            };
        },
        mounted() {
            this.mapChart();
        },
        beforeDestroy() {
            if (this.myChart) {
                this.myChart.clear()
            }
        },
        methods: {
            // 返回全国视图
            backMap() {
                this.mapChart()
            },
            mapChart() {
                let that = this
                that.myChart = echarts.init(that.$refs.myEchart); //这里是为了获得容器所在位置
                that.myChart.off("click"); //移除点击事件
                window.onresize = that.myChart.resize;
                initEcharts('china')

                function initEcharts(map) {
                    let option = {
                        geo:{
                            map:map,
                            roam:false,//是否开启鼠标缩放和平移漫游
                            // 地图区域的多边形 图形样式
                            itemStyle: {
                                normal: {
                                    borderColor: "rgba(147, 235, 248, 1)",
                                    borderWidth: 1,
                                    areaColor: {
                                        type: "radial",
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.8,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                    shadowColor: "rgba(128, 217, 248, 1)",
                                    // shadowColor: 'rgba(255, 255, 255, 1)',
                                    shadowOffsetX: -2,
                                    shadowOffsetY: 2,
                                    shadowBlur: 10,
                                },
                                emphasis: {
                                    areaColor: "#389BB7",
                                    borderWidth: 0,
                                },
                            },
                        },
                        series:[
                            {
                                name:"信息",
                                type:"map",
                                mapType:map,
                                geoIndex:0,//用这个 geoIndex 指定一个 geo 组件
                            }
                        ]
                    };
                    that.myChart.setOption(option)
                }
                that.myChart.on("click", function (param) {
                    console.log("地图点击",param)
                    if (param.name in provinces) {
                        // 处理省模块
                        let names = param.name;
                        for (let key in provinces) {
                            if (names == key) {
                                showProvince(provinces[key], key);
                                break;
                            }
                        }
                    } else if (param.name in cityMap) {
                        // 处理市模块
                        let names = param.name;
                        for (let key in cityMap) {
                            if (names == key) {
                                showCitys(cityMap[key], key);
                                break;
                            }
                        }
                    }

                });
                //展示对应的省
                function showProvince(eName,param) {
                    console.log("e",eName,param)
                    getAction(`/map/province/${eName}.json`,{}).then(data=>{
                        echarts.registerMap(param, data.data);
                        initEcharts(param)
                    })
                }
                //展示对应市
                function showCitys(cName, param) {
                    console.log("对应市",cName, param)
                    getAction(`/map/city/${cName}.json`,{}).then(data=>{
                        echarts.registerMap(param, data.data);
                        initEcharts(param)
                    })
                }
            }
        }
    }
</script>